<!-- 这是工资单页面 -->
<template>
  <div class="admin-hr-salary">
    <div class="hr-salary-select">
      <el-form
        :model="formSalary"
        label-width="80px"
        :inline="true"
        size="normal"
      >
        <el-form-item label="工号">
          <el-input
            v-model="formSalary.number"
            placeholder="请输入查询工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="formSalary.name"
            placeholder="请输入查询姓名"
          ></el-input>
        </el-form-item>
        <el-button
          type="primary"
          size="default"
          icon="el-icon-search"
          @click="SelectSalary"
          >查询</el-button
        >
      </el-form>
     <el-button
        type="primary"
        icon="el-icon-plus"
        class="hr-salary-add"
        @click="omAddSalary"
        >新增</el-button
      >
      <div class="hr-salary-datagrid">
        <el-table :data="tableData" border  height="500">
             <!-- <el-table-column fixed prop="id" label="序号" width="50" align="center">
          </el-table-column> -->
          <el-table-column fixed prop="number" label="工号" width="150"   align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.number" style="width:100px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column fixed prop="name" label="姓名" width="120" align="center">
                <template slot-scope="scope" >
                  <el-input v-model="scope.row.name" style="width:80px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="150" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.sex" style="width:100px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="boarddate" label="入职日期" width="200" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.boarddate" style="width:150px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="departmentone" label="一级部门" width="200" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.departmentone" style="width:120px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="departmenttwo" label="二级部门" width="150" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.departmenttwo" style="width:100px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="leader" label="部门领导" width="150" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.leader" style="width:100px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="job" label="职位" width="200" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.job" style="width:150px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="workdate" label="上班时长" width="200" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.workdate" style="width:150px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="leavedate" label="本月请假时长" width="150" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.leavedate" style="width:100px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="salary" label="应发工资" width="200" align="center">
              <template slot-scope="scope" >
                  <el-input v-model.number="scope.row.salary" style="width:150px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="withhold" label="扣款" width="150" align="center">
              <template slot-scope="scope" >
                  <el-input v-model.number="scope.row.withhold" style="width:100px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="withholdreason" label="扣款原因" width="200" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.withholdreason" style="width:150px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column prop="payroll" label="实发工资" width="200" align="center">
              <template slot-scope="scope" >
                  <el-input v-model="scope.row.payroll" style="width:150px;border:none" :readonly="!scope.row.disabled"  class="table-salary-input"></el-input>
              </template>
          </el-table-column>
          <el-table-column label="操作" width="300" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button type="success" size="mini" icon="el-icon-check" @click="onConfirmData(scope.row)"
                >确定</el-button
              >
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="onUpdateDate(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="onDeleteDate(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      formSalary: {
        number: "",
        name: "",
      },
      tableData: [],
      list:[],
      updateData:false,
       editor:true
     
    };
  },
  //监听属性 类似于data概念
  computed: {
    //  payroll:{
    //      get:function(){
    //        return  this.tableData.payroll=this.tableData.salary-this.tableData.withhold     
    //  }
  //},
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    SelectSalary: function () {
      this.$http.get("/getPersonneInfo").then((res) => {
           
          if(this.formSalary.number==''&&this.formSalary.name==''){
                this.tableData=res.data
              
          }else if(this.formSalary.number!=''||this.formSalary.name){
              this.tableData=res.data
              this.list=[]
              this.tableData.forEach(item=>{
                   if(this.formSalary.name==item.name&&this.formSalary.number==''){
                     this.list.push(item)
                   }else if(this.formSalary.number==item.number&&this.formSalary.name==''){
                       this.list.push(item)
                   }else if((this.formSalary.name==item.name&&this.formSalary.number!=item.number)||(this.formSalary.name!=item.name&&this.formSalary.number==item.number)){
                       this.list=[]
                   }else if(this.formSalary.name==item.name&&this.formSalary.number==item.number){
                    //    console.log(this.formSalary.name);
                    //    console.log(this.formSalary.number);
                    //    console.log(item);
                       this.list.push(item)
                   }
              })
              this.tableData=[]
              this.tableData=this.list                 
            }     
      });
    },
    omAddSalary:function(){
        // let addlist={
        //     id:this.tableData.length+1,
        //     number:'',
        //     name:'',
        //     sex:'',
        //     boarddate:'',
        //    departmentone:'',
        //    departmenttwo :'',
        //    leader:'',
        //    job:'',
        //    workdate:'',
        //    leavedate:'',
        //    salary:'',
        //    withhold:'',
        //    withholdreason:'',
        //    payroll:'',

        // }
        this.tableData.unshift({
             id:this.tableData.length+1,
            disabled: true
           
           
        })
    },
    //确定按钮
    onConfirmData:function(row){
        row.disabled=false
    },
    //编辑按钮
    onUpdateDate:function(row){
      row.disabled=true
    },

    //删除按钮
    onDeleteDate:function(index){
        this.tableData.splice(index,1)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.SelectSalary();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
div.admin-hr-salary {
  width: 100%;
  margin-left: 30px;
  margin-top: 70px;
  position: relative;
 height: 100%;
 overflow: hidden;
 box-sizing: border-box;
  div.hr-salary-select {
    el-form {
      el-form-item {
        el-input {
        }
      }

      el-button {
      }
    }

    div.hr-salary-datagrid {
      
      el-table {
        el-table-column {
           .table-salary-input .el-input_inner{
               border: none;
            }
           
        }
      }
    }
  }
}
</style>